<template>
	<div class="particulars">
		<div class="goodsDetailPage">
			<div class="goodsDetailPage-header " :class="{active:headerShow}">

				<div class="back" @click="back">
					<van-icon size="25" name="arrow-left" />
				</div>
				<p v-show="headerShow" class="title">{{info.name}}</p>
				<div class="share">
					<van-icon size="25" name="share-o" />
				</div>

			</div>

		</div>

		<!--   content -->

		<div class="content">
			<div class="img">
				<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for="item in info.goods_banner_imgs"><img :src="item" alt="" /></van-swipe-item>

				</van-swipe>

			</div>
			<div class="headline">{{info.name}}</div>
			<div class="price-detail">
				<span class="price">¥{{info.price}}</span>
				<!-- <span>¥{{ info.price }}</span> -->
				<div class="detail">
					<span class="stock">库存:{{info.stock}} </span>
					<span>销量:{{info.total_sell_count}}</span>
				</div>
			</div>
			<div class="blank"></div>
			<div class="coupon">
				<p>领券</p>
				<div class="mitigate">满50减5</div>
				<div class="mitigate">满100减10</div>
				<div class="mitigate">满200减20</div>
				<span class="iconfont icon-gengduo"></span>
			</div>
			<!-- 弹出层 -->
			<van-action-sheet title="可领取优惠券">
				<div class="contents">内容
				</div>
			</van-action-sheet>
			<div class="blank"></div>
			<div class="freight">
				<p>运费</p>
				<p>￥0.00</p>
			</div>
			<!-- 弹出层结束 -->
			<div class="blank"></div>
			<div class="specification" @click="popupState=true">
				<p>规格选择</p>
				<span class="iconfont icon-gengduo"></span>
			</div>
			<!-- 弹出层 -->
			<van-popup v-model:show="popupState" closeable close-icon="close" position="bottom"
				:style="{ height: '65%' }">
				<div class="contents">

					<div class="contents-img"><img alt="" :src="activeSku.image"></div>
					<span class="prices">{{activeSku.goods_name}}</span>
					<span class="prices">{{activeSku.sku_name}}</span>
					<span class="prices">{{activeSku.price}}</span>
					<div class="specifications-wrap">

						<div class="specifications" v-for="(item,index) in info.spec_list">
							<p>{{item.name}}</p>
							<div class="contents-detail">
								<!-- item.index 默认都是0 -->
								<div class="options " @click="specTap(index,index2)"
									:class="{actives:item.index===index2 }" v-for="(item2,index2) in item.list">
									{{item2.name}}
								</div>
							</div>
						</div>
					</div>

					<div class="popup-bottom">
						<div class="line"></div>
						<div class="buy">
							<p>购买数量</p>
							<van-stepper v-model="buy_num" />
						</div>
						<div class="buy-btn">
							<div class="btn" style="background: #FF9C13;" @click="addCart">加入购物车</div>
							<div class="btn" @click="buy">立即购买</div>
						</div>
					</div>

				</div>
			</van-popup>
			<!-- 弹出层结束 -->
			<div class="blank"></div>
			<div class="site">
				<img src="../../assets/phwj.png" alt="">
				<div class="detail">
					<p>普惠万家商城</p>
					<p class="address">河北省沧州市运河区华商大厦2001</p>
				</div>
			</div>
			<div class="blank"></div>

			<!--  富文本模式 rich-text -->
			<div class="goods_detail_body" v-html="info.goods_detail_body" v-if="info.goods_detail_body"></div>
			<!--  简单图片模式 -->
			<div class="detail-imgs" v-else>
				<img v-for="item in info.goods_detail_imgs" :src="item" alt="">
			</div>


			<goodsComment :comment_count="info.comment_count" :commentList="commentList"></goodsComment>


		</div>
		<div class="footer">
			<div class="iconfonts">
				<van-icon @click="Collect" name="star" :color="
				isCollect?'red':'#ccc'
				" size="30" />
				<van-icon name="shopping-cart-o" size="30" />
			</div>
			<div class="trolley" @click="popupState=true">加入购物车</div>
			<div class="immediately" @click="popupState=true">立即购买</div>
		</div>


	</div>

</template>

<script setup>
	import {
		useRoute,
	} from 'vue-router';
	import goodsComment from './components/goodsComment.vue'
	import router from '@/router';
	import useGoods from './hooks/useGoodsDetail.js'
	import useScroll from './hooks/useScroll.js'
	import useSku from './hooks/useSku.js'
	import useGoodsComment from './hooks/useGoodsComment.js'
	import useCollect from './hooks/useCollect.js'
	import useActiveSkuInfo from './hooks/useActiveSkuInfo.js'
	import useSubmit from './hooks/useSubmit.js'
	const route = useRoute()
	const goodsId = route.query.goodsId;

// 获取数据信息
	const {
		info,
		isCollect
	} = useGoods(goodsId)
	
	// 滚动
	const {
		headerShow
	} = useScroll()
	
	
	// 评论
	const {
		commentList
	} = useGoodsComment(goodsId)
	
	
	//  sku弹出层 弹出
	// sku规格的切换
	const {
		popupState,
		specTap
	} = useSku(info)
	
	
	//   收藏 取消收藏
	const {
		Collect
	} = useCollect(goodsId, isCollect)
	
	
	// 监听spcelist 变化 得到最新skuInfo
	const {
		activeSku
	} = useActiveSkuInfo(info)
	
	//  加入 和立即购买的逻辑
	const {
		addCart,
		buy
	} = useSubmit(activeSku,popupState)
</script>

<style lang="scss">
	@import url('./assets/goodsDetail.scss');
</style>